<template>
  <view class="login-container">
    <view class="logo-box">
      <image src="@/static/logo.png" mode="aspectFit"></image>
    </view>

    <view class="form-box">
      <view class="input-item">
        <text class="label">用户名</text>
        <input
            v-model="form.username"
            placeholder="请输入用户名"
        />
      </view>

      <view class="input-item">
        <text class="label">密码</text>
        <input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            password
        />
      </view>

      <view class="privacy-item">
        <checkbox-group @change="handlePrivacyChange">
          <label>
            <checkbox :checked="agreePrivacy" color="#1aad19"/>
            <text>我已阅读并同意</text>
          </label>
        </checkbox-group>
        <text class="privacy-link" @click="navToPrivacy">《隐私政策》</text>
      </view>

      <button
          class="login-btn"
          :disabled="loading || !agreePrivacy"
          @click="handleLogin"
      >
        {{ loading ? '登录中...' : '登录' }}
      </button>

      <view class="footer">
        <text @click="navToRegister">没有账号？立即注册</text>
      </view>
    </view>
  </view>
</template>

<script>
import {showToast} from '@/utils/util'
import userApi from '@/api/userApi'
import {useUserStore} from '@/stores/user'

export default {
  data() {
    return {
      loading: false,
      agreePrivacy: false,
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      if (!this.form.username) {
        showToast('请输入用户名')
        return
      }

      if (!this.form.password) {
        showToast('请输入密码')
        return
      }

      this.loading = true
      try {
        const userStore = useUserStore()
        const res = await userApi.login({
          username: this.form.username,
          password: this.form.password
        })

        userStore.login(res.data.accessToken, res.data.refreshToken,res.data.userInfo)
        showToast('登录成功')
        uni.switchTab({
          url: '/pages/index/index'
        })
      } catch (err) {
        console.error(err)
        showToast(err.message || '登录失败')
      } finally {
        this.loading = false
      }
    },
    navToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
    handlePrivacyChange(e) {
      this.agreePrivacy = e.detail.value.length > 0
    },
    navToPrivacy() {
      uni.navigateTo({
        url: '/pages/privacy/privacy'
      })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  padding: 60rpx;

  .logo-box {
    display: flex;
    justify-content: center;
    margin-bottom: 80rpx;

    image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .form-box {
    .input-item {
      margin-bottom: 40rpx;

      .label {
        display: block;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        color: #666;
      }

      input {
        height: 80rpx;
        padding: 0 20rpx;
        border-bottom: 1rpx solid #eee;
        font-size: 32rpx;
      }
    }

    .login-btn {
      margin-top: 60rpx;
      height: 90rpx;
      line-height: 90rpx;
      background: #1aad19;
      color: #fff;
      font-size: 32rpx;
      border-radius: 45rpx;

      &[disabled] {
        background: #9ed49b;
      }
    }

    .privacy-item {
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      font-size: 26rpx;
      color: #666;

      .privacy-link {
        color: #1aad19;
        margin-left: 10rpx;
      }
    }

    .footer {
      margin-top: 40rpx;
      text-align: center;
      color: #999;
      font-size: 26rpx;

      text {
        color: #1aad19;
      }
    }
  }
}
</style>
